<template>
  <div class="register">
    <div class="image">
      <span>创建一个普通用户</span>
    </div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="手机号">
        <el-input v-model="form.telphone"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-checkbox v-model="checked"
        >I accept<a href="#">Terms and Conditions</a></el-checkbox
      >
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
    <div class="haveAccount">
      <span @click="jumpLogin">已有帐号?</span>
    </div>
  </div>
</template>

<script>
import { register } from "../api/myReq";
export default {
  name: "Register",
  data() {
    return {
      form: {
        telphone: "",
        username: "",
        password: "",
      },
      checked: true,
    };
  },
  methods: {
    onSubmit() {
      console.log(this.form);
      register(this.form).then((resp) => {
        if (resp.data.code == 200) {
          this.$message({
            message: resp.data.message,
            duration: 2000,
            type: "success",
          });
        }
        this.$router.push("/login");
      });
    },
    jumpLogin(){
      this.$router.push("/login");
    }
  },
};
</script>

<style  scoped>
.register {
    position: relative;
  box-sizing: border-box;
  width: 400px;
  height: 340px;
  margin: 100px auto;
}
.image {
  height: 130px;
  background: url("../assets/bg.jpg");
  background-position: 50% 50%;
  border-radius: 10px 10px 0px 0px;
  text-align: center;
  line-height: 120px;
}
.image span {
  font-size: 20px;
}
.el-form {
  padding: 20px 0px;
  height: 310px;
  background-color: white;
  border-radius: 0 0 10px 10px;
}
/deep/.el-form-item__label {
  width: 75px !important;
}
/deep/.el-input__inner {
  width: 91%;
}
.el-checkbox {
  margin-left: 20px;
}
.el-button {
  margin-left: 65px;
  margin-top: 20px;
}
.haveAccount {
  position: absolute;
  left: 150px;
  bottom: -120px;
}
.haveAccount span{
  font-size: 14px;
  color: #606266;
}
</style>